<template>
  <div class="header_neck">
    <div class="logo">
      <img src="@/assets/img/login.png" alt="">
    </div>
    <div class="title">
      <ul>
        <li><a href="">XiaoMi</a></li>
        <li><a href="">HUAWEI</a></li>
        <li><a href="">vivo</a></li>
        <li><a href="">OPPO</a></li>
        <li><a href="">Apple</a></li>
        <li><a href="">HONOR</a></li>

      </ul>
    </div>
    <div class="search">
      <input type="text" placeholder="小米手机">
      <button type="button" class="iconfont">&#xe646;</button>
      <div class="search-list">
        <a href="#">小米14Pro</a>
        <a href="#">手机换新</a>
        <a href="#">小米电视</a>
        <a href="#">红米K70Pro</a>
        <a href="#">华为Mate60Pro</a>
        <a href="#">小米电脑</a>
        <a href="#">充电宝</a>
        <a href="#">苹果15ProMax</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
@import url('../../assets/css/font_4367545_5vuckvup5pp/iconfont.css');

/* 导航栏*/
.header_neck {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  background-color: #fff;
}

.header_neck .logo {
  width: 130px;
  height: 100px;
}

.header_neck .logo img {
  width: 100%;
  height: 100%;
  overflow: hidden;

}

.header_neck .title {
  width: 700px;
}

.header_neck .title ul li a {
  color: #333;
  font-size: 16px;
  font-weight: 540;
}

.header_neck .title ul li a:hover {
  color: #ff6700;
}

.header_neck .title ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.header_neck .serch {
  width: 300px;
  height: 100%;
}

/*搜索框*/
.search>input {
  float: left;
  width: 223px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid #e0e0e0;
  border-right: none;
  /*去掉input点击时黑色的边框*/
  outline: none;
  transition: all .2s;
}

.search>button {
  float: left;
  width: 52px;
  height: 50px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  font-size: 24px;
  transition: all .2s;
}

.search>button:hover {
  background-color: #ff6700;
  border-color: #ff6700;
  color: #fff;
}

.search>input:hover,
.search>input:hover+button {
  border-color: #b0b0b0;
}

.search>input:focus,
.search>input:focus+button {
  border-color: #ff6700;
}

.search-list {
  display: none;
  z-index: 720;
  position: absolute;
  top: 75px;
  right: 137px;
  width: 243px;
  height: 240px;
  background-color: #fff;
  border: 1px solid #ff6700;
  border-top: none;
}

.search>input:focus~.search-list {
  display: block;
}

.search-list>a {
  display: block;
  width: 100%;
  height: 30px;
  padding: 5px 10px;
  box-sizing: border-box;
  text-align: left;
  line-height: 20px;
  color: #333;
}

.search-list>a:hover {
  background-color: #fafafa;
}

.clear {
  clear: both;
}
</style>